import React, { memo } from "react";
import { Outlet, useMatches, useNavigate } from "react-router-dom";
import MyActionBar from "../Components/MyActionBar";
import MyNavbar from "../Components/MyNavbar"
const Home = memo(() => {
  const navigate = useNavigate()
  let matches = useMatches();
  console.log(matches); //是一个数组包对象
  //把带有title的筛选出来
  let filterArr = matches.filter((item) => item.handle.title);
  return (
    <div>
      <MyNavbar></MyNavbar>
      <h2>Home</h2>
      <button onClick={()=>{navigate('/home/Cart')}}>点击去Cart页</button>
      <button onClick={()=>{navigate('/home/Cart/Detail')}}>点击去Detail页</button>
      <br></br>
      {filterArr.map((item, index) => (
        <span key={item.id} onClick={()=>{navigate(item.pathname)}}>
          {/* index 不等于零的话 就拼接上< */}
          {index !== 0 && "<"}
          {item.handle.title}
        </span>
      ))}
      <Outlet></Outlet>
      <MyActionBar></MyActionBar>
    </div>
  );
});

export default Home;
